<template>
	<div ref="container" class="three-container"></div>
</template>

<script>
	import * as THREE from 'three';
	import {
		GLTFLoader
	} from 'three/examples/jsm/loaders/GLTFLoader.js';

	export default {
		name: 'ThreeScene',
		mounted() {
			this.initThreeJS();
		},
		methods: {
			initThreeJS() {
				// 创建场景
				const scene = new THREE.Scene();

				// 创建相机
				const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
				camera.position.z = 5;

				// 创建渲染器
				const renderer = new THREE.WebGLRenderer();
				renderer.setSize(window.innerWidth, window.innerHeight);
				this.$refs.container.appendChild(renderer.domElement);

				// 添加光源
				const light = new THREE.AmbientLight(0x404040); // Ambient light
				scene.add(light);

				// 加载 GLTF 模型
				const loader = new GLTFLoader();
				const path = "tripo_convert_0d350205-969f-4e53-94c2-d36020915f59.glb";
				// const path = "20240823_test1.gltf";
				loader.load('blender_models/' + path, (gltf) => {
					console.log("------------加载自己模型文件", gltf.scene)
					// 添加模型到场景
					scene.add(gltf.scene);
					// this.animate();

					gltf.scene.children[0].scale.set(20, 20, 20);
					scene.add(gltf.scene.children[0]);
					this.animate();
				});

				// 渲染循环
				this.animate = () => {
					requestAnimationFrame(this.animate);
					renderer.render(scene, camera);
				};

				// 窗口尺寸变化处理
				window.addEventListener('resize', () => {
					camera.aspect = window.innerWidth / window.innerHeight;
					camera.updateProjectionMatrix();
					renderer.setSize(window.innerWidth, window.innerHeight);
				});
			}
		}
	}
</script>

<style scoped>
	.three-container {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
</style>